.item {
    margin: 15px 0;
    padding: 0;
    position: relative;
    border-radius: 4px;
    min-height: 60px;

    & {
        background-color: #f0f0f0;
        &, &::after, > .versions, > .diff-header, > .versions > LI, > .contents > .stack {
            border-color: #ddd;
        }
        &::after {
            background-color: #666;
        }
    }

    &#item-head {
        min-height: 20px;
    }
}

.method, #item-head {
    &[data-method]::after {
        content: attr(data-method);
        position: absolute;
        top: 0px;
        width: 55px;
        padding: 3px 5px;
        font-size: 12px;
        font-weight: bold;
        border-top: none;
        border-left: none;
        color: #FFF;
        border-radius: 4px 0 4px 0;
    }

    &[data-method=GET] {
        background-color: hsl(200, 65%, 90%);
        &, &::after, > .versions, > .diff-header, > .versions > LI, > .contents > .stack {
            border-color: hsl(200, 65%, 70%);
        }
        &::after {
            background-color: hsl(200, 100%, 35%);
        }
    }
    &[data-method=POST] {
        background-color: hsl(103, 45%, 90%);
        &, &::after, > .versions, > .diff-header, > .versions > LI, > .contents > .stack {
            border-color: hsl(103, 45%, 70%);
        }
        &::after {
            background-color: hsl(103, 90%, 35%);
        }
    }
    &[data-method=PUT] {
        background-color: hsl(38, 80%, 90%);
        &, &::after, > .versions, > .diff-header, > .versions > LI, > .contents > .stack {
            border-color: hsl(38, 80%, 70%);
        }
        &::after {
            background-color: hsl(38, 90%, 40%);
        }
    }
    &[data-method=DELETE] {
        background-color: hsl(0, 45%, 90%);
        &, &::after, > .versions, > .diff-header, > .versions > LI, > .contents > .stack {
            border-color: hsl(0, 45%, 70%);
        }
        &::after {
            background-color: hsl(0, 90%, 35%);
        }
    }
    &[data-method=HEAD] {
        background-color: hsl(0, 0%, 90%);
        &, &::after, > .versions, > .diff-header, > .versions > LI, > .contents > .stack {
            border-color: hsl(0, 0%, 70%);
        }
        &::after {
            background-color: hsl(0, 0%, 35%);
        }
    }
    &[data-method=OPTION] {
        background-color: hsl(0, 0%, 97%);
        &, &::after, > .versions, > .diff-header, > .versions > LI, > .contents > .stack {
            border-color: hsl(0, 0%, 80%);
        }
        &::after {
            background-color: hsl(0, 0%, 70%);
        }
    }
    &[data-method=PATCH] {
        background-color: hsl(65, 90%, 90%);
        &, &::after, > .versions, > .diff-header, > .versions > LI, > .contents > .stack {
            border-color: hsl(65, 90%, 70%);
        }
        &::after {
            background-color: hsl(65, 90%, 40%);
        }
    }
}

#item-head {
    display: none;
    position: fixed;
    top: -1px;
    margin: 0;
    border-bottom: none;
    z-index: 10;

    &.item {
        border-radius: 0;

        &::after {
            border-radius: 0 0 4px 0;
        }

        > .versions {
            border-radius: 0 0 0 4px;
        }
    }
}